<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="shopCenter-info">
		<view class="shopCenter-head">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
				<swiper-item class="swiper-img-item" v-for="(item,index) in storeInfo.imageList" :key="index">
					<image @click="previewImage(storeInfo.imageList,index)" :src="item" class="img-item"
						mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 数据显示 -->
		<view class="store-date-box w100 flex-row-center">
			<view class="name-box flex-row-center">
				<text class="name">{{storeInfo.store_name}}</text>
				<up-icon name="home-fill" color="#79DED3" size="32rpx"></up-icon>
			</view>
			<template v-if="storeAccount">
				<view class="profit-box w100 flex-center">
					<text class="name">今日收益</text>
					<view class="price-box ">
						<text class="unit">￥</text>
						<text class="num">{{storeAccount.todayProfit}}</text>
					</view>
				</view>
				<view class="date-content w100 flex-row-center">
					<view class="date-item flex-center ">
						<text class="name">组队数量</text>
						<view class="num-box">
							<text class="num">{{storeAccount.team_number}}</text>
						</view>
					</view>
					<view class="date-item flex-center">
						<text class="name">总收益</text>
						<view class="num-box">
							<text class="num">{{storeAccount.total_profit}}</text>
						</view>
					</view>
				</view>
			</template>
			<!-- 地址 -->
			<view class="address-box flex-row-center">
				<up-icon name="map" color="#A1A2A3" size="24rpx"></up-icon>
				<text class="address">{{storeInfo.address}}</text>
			</view>
		</view>
	</view>
	<view class="option-box  w100">
		<view class="option-content w100">
			<up-grid @click="itemClick">
				<up-grid-item v-for="(item,index) in optionList" :key="index">
					<view class="option-item flex-center">
						<up-icon :name="item.icon" color="#79DED3" size="64rpx"></up-icon>
						<text class="name">{{item.name}}</text>
					</view>
				</up-grid-item>
			</up-grid>

		</view>
	</view>
	<up-popup round="18rpx" :show="shareShow" bgColor='#222528' @close="closeShare" :closeOnClickOverlay="false"
		mode="bottom">
		<sharePopupVue ref="sharePopup" @closeShare="closeShare">
		</sharePopupVue>
	</up-popup>
</template>

<script setup>
	import teamItemVue from '@/components/main/teamItem.vue';
	import matchContentVue from '@/components/userCenter/matchContent.vue';
	import clerkContentVue from '@/components/userCenter/clerkContent.vue';
	import sharePopupVue from '../components/sharePopup.vue';
	import activityItem from '@/components/activity/activityItem.vue'

	import {
		userInfoStore
	} from '@/stores/user';
	const emit = defineEmits(['changeItem']);
	const userStore = userInfoStore();
	const addressInfo = ref(computed(() => userStore.addressInfo));
	const contentIndex = ref(0);
	let tabIndex = [];
	const status = ref('loading');
	const teamInfo = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	});
	const matchInfo = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	});
	const storeAccount = ref(null);
	const shareShow = ref(false);
	const sharePopup = ref(null);
	const optionList = ref([{
			name: '发布组队',
			icon: 'plus-circle-fill'
		}, {
			name: '申请比赛',
			icon: 'calendar-fill'
		}, {
			name: '组队列表',
			icon: 'file-text-fill'
		},
		// {
		// 	name: '店员管理',
		// 	icon: 'home-fill'
		// },
		{
			name: '比赛中心',
			icon: 'tags-fill'
		},
		// {
		// 	name: '收益明细',
		// 	icon: 'order'
		// },
		{
			name: '核销',
			icon: 'scan'
		}, {
			name: '邀请用户',
			icon: 'share-fill'
		},
		// {
		// 	name: '设置',
		// 	icon: 'setting-fill'
		// }
	])
	const storeId = ref(0);
	const storeInfo = ref({
		imageList: []
	});
	const mpCode = ref('');
	onLoad((option) => {
		if (userStore.userInfo?.is_merchant == 1 || userStore.userInfo?.is_store == 1) {
			optionList.value.splice(3, 0, {
				name: '店员管理',
				icon: 'home-fill',
			})
			optionList.value.splice(5, 0, {
				name: '收益明细',
				icon: 'order'
			})
			optionList.value.push({
				name: '设置',
				icon: 'setting-fill'
			})
		}
		if (option.storeId) {
			storeId.value = option.storeId;
			getStoreAccount(option.storeId);
			getStoreDetails(option.storeId);
		}
	})
	onMounted(async () => {
		uni.$on('updateRate', function(data) {
			if (data.rate) {
				storeInfo.value.assistant_rate = data.rate;
			}
		})

	});
	onUnload(() => {
		uni.$off('updateRate');
	});
	onPullDownRefresh(async () => {
		uni.showLoading({
			title: '刷新中'
		})
		await getStoreAccount(storeId.value);
		await getStoreDetails(storeId.value);
		uni.stopPullDownRefresh();
	});
	const getStoreDetails = async (id) => {
		const res = await $Api.store.getStoreDetails({
			id,
			lat: addressInfo.value.latitude,
			lng: addressInfo.value.longitude
		});
		uni.hideLoading();
		if (res.code === 1) {
			if (res.data) {
				let imageList = [];
				let is24Hr = 0; //是否24小时营业
				if (res.data.juli) {
					res.data.juli = parseFloat(res.data.juli).toFixed(2)
				}
				if (res.data.banner_image) {
					if (typeof res.data.banner_image === 'string') {
						imageList = res.data.banner_image.split(',');
					} else if (Array.isArray(res.data.banner_image)) {
						res.data.banner_image.forEach(item => {
							imageList.push(item.url);
						})
					}
				}
				if (res.data.business_start_hours && res.data.business_end_hours) {
					if (res.data.business_start_hours === res.data.business_end_hours) {
						is24Hr = 1
					}
				}
				storeInfo.value = {
					...res.data,
					imageList,
					is24Hr
				};
				signShare(); //注册分享
				// console.log('storeInfo.value', storeInfo.value, res.data);
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const changeIdentity = () => { //切换身份
		emit('changeItem', 'user')
	}
	const itemClick = (item) => { //工具按钮
		// console.log('itemClick', item);
		if (item === 0) { //发布组队
			uni.navigateTo({
				url: '/page_user/views/initiateTeam?storeId=' + storeId.value + '&storeName=' +
					storeInfo.value.store_name
			})
		} else if (item === 1) { //发布比赛
			uni.navigateTo({
				url: '/page_store/views/publishMatch?storeId=' + storeId.value + '&storeName=' +
					storeInfo.value.store_name
				// url: '/page_store/views/myGame'
			})
		} else if (item === 2) { //组队列表
			uni.navigateTo({
				url: '/page_store/views/storeGroupList?storeId=' + storeId.value
			})
		} else if (item === 3) { //店员管理
			uni.navigateTo({
				url: '/page_store/views/employeeList?storeId=' + storeId.value
			})
		} else if (item === 4) { //比赛中心
			uni.navigateTo({
				url: '/page_store/views/matchList?storeId=' + storeId.value
			})
		} else if (item === 5) { //收益明细
			uni.navigateTo({
				url: '/page_store/views/profitLog?storeId=' + storeId.value
			})
		} else if (item === 6) { //核销
			uni.showActionSheet({
				itemList: ['门店核销组队', '核销队员'],
				success: function(res) {
					if (res.tapIndex == 0) {
						writeOff();
					} else if (res.tapIndex == 1) {
						uni.navigateTo({
							url: '/page_user/views/writeOff'
						})
					}
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		} else if (item === 7) { //推广邀请
			toShare();
		} else if (item === 8) { //设置
			uni.navigateTo({
				url: '/page_store/views/setting?storeId=' + storeId.value + '&rate=' + storeInfo.value
					.assistant_rate
			})
		}
	}
	const writeOff = async () => { //打开核销
		uni.scanCode({
			scanType: ['qrCode'],
			success: async (res) => {
				const ress = await $Api.store.writeOff({
					verification_code: res.result
				}, true);
				if (ress.code == 1) {
					uni.showToast({
						title: '核销成功！'
					})
				} else {
					uni.$u.toast(ress.msg);
				}
			},
			fail: (err) => {
				uni.$u.toast('识别失败');
			}
		})
	}
	const closeShare = () => { //关闭分享弹窗
		shareShow.value = false;
	}
	const changeTab = async (e) => {
		contentIndex.value = e.index;
	}
	const changeSwiper = (e) => {
		contentIndex.value = e.detail.current;
	}
	const toShare = async () => { //去分享
		const res = await $Api.store.getStoreMpCode({
			id: storeInfo.value.id
		});
		if (res.code == 1) {
			let mpCode = filterBase64(res.data.image);
			sharePopup.value.toPath({
				mainBackground: storeInfo.value.background_image || storeInfo.value.imageList[0],
				mpCode: mpCode,
				name: storeInfo.value.store_name,
				description: storeInfo.value.description,
				timeTips: `营业时间:${storeInfo.value.business_start_hours} - ${storeInfo.value.business_end_hours}`,
				address: storeInfo.value.address,
			});
			shareShow.value = true;
		} else {
			uni.$u.toast(res.msg);
		}
	};
	const getStoreAccount = async (id) => {
		const res = await $Api.store.getStoreAccount({
			id
		});
		if (res.code === 1) {
			storeAccount.value = res.data;
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const filterBase64 = (codeImages) => {
		return 'data:image/png;base64,' + codeImages.replace(/[\r\n]/g, "");
	}
	const openMap = (latitude = 30.615869, longitude = 104.067839) => { //打开地图
		uni.openLocation({
			latitude: parseFloat(latitude),
			longitude: parseFloat(longitude),
			success: function(res) {},
			fail: function(error) {
				console.log(error)
			}
		})
	}
	const signShare = () => { //注册分享
		uni.$mpShare = {
			title: '北星掼牌，快来加入我们吧',
			path: 'page_store/views/storeDetailsuser?t=2' + `&storeId=${storeId.value}` + '&i=' + storeInfo.value
				.invite_code //t-1 用户 t-2 商户
		}
	}
	const previewImage = (list, index) => { //预览图片
		previewImg(list, index);
	}
</script>
<style>
	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>
<style lang="scss" scoped>
	.swiper {
		width: 100%;
		height: 425rpx;

		.swiper-img-item {
			width: 100%;
			height: 100%;

			.img-item {
				width: 100%;
				height: 100%;
			}
		}
	}

	.shop-ava {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.name-box {
		.name {
			font-weight: bold;
			font-size: 38rpx;
			color: $name-color;
			margin-right: 10rpx;
			max-width: 480rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	.address-box {
		margin-top: 38rpx;

		.address {
			font-weight: 500;
			font-size: 24rpx;
			color: $description-color;
			margin-left: 10rpx;
		}
	}

	.navigation-box {
		.navigation_icon {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.store-date-box {
		padding: 26rpx 40rpx;
		// align-items: center;
		flex-direction: column;
		border-bottom: 8rpx solid #111416;

		.profit-box {
			flex-direction: column;
			margin: 48rpx 0 48rpx 0;

			.name {
				font-size: 32rpx;
				color: $name-color;
			}

			.price-box {
				color: $price-color;
				font-weight: bold;
				margin-top: 12rpx;

				.num {
					font-size: 46rpx;
				}

				.unit {
					font-size: 28rpx;
				}
			}
		}

		.date-content {
			.date-item {
				width: 50%;
				flex-direction: column;
				box-sizing: border-box;

				.name {
					font-size: 28rpx;
					color: $name-color;
					margin-bottom: 12rpx;
				}

				.num {
					color: $price-color;
					font-size: 30rpx;
					margin-top: 16rpx;
				}
			}

			.date-item:not(:last-child) {
				border-right: 2rpx solid #69BBB0;
			}
		}
	}

	.option-box {
		padding: 26rpx 40rpx;
	}

	.option-content {
		margin-top: 18rpx;

		.option-item {
			width: 180rpx;
			height: 180rpx;
			flex-direction: column;

			.name {
				font-size: 30rpx;
				color: $name-color;
				margin-top: 16rpx;
			}
		}
	}
</style>